<template>
    <div class="maintainexploitconfigtab" v-loading="state.loading">
        <el-card>
            <template #header>
				<div class="card-header clearfix">
                        <span class="headerTitle">{{router.currentRoute.value.meta.title}}</span>
                        <div class="floatRight">
                            <el-button type="primary" v-if="isAuthBtn('add')" @click="tabBtn('add','')"><i class="fa fa-send"></i>新增</el-button>
                        </div>
				</div>
			</template>
            <div>
                <el-table
                    :data="state.dataList"
                    style="width: 100%; margin-bottom: 20px"
                    row-key="id"
                >
                    <el-table-column prop="id" label="id"  align="center" min-width="100" />
                    <el-table-column prop="title" label="分类名称"  align="center"  min-width="200" />
                    <el-table-column prop="fields" label="分类字段"  align="center" min-width="200"  />
                    <el-table-column label="分类状态"  align="center"  min-width="100" >
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.statusT"
                                class="ml-2"
                                width="60"
                                inline-prompt
                                style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
                                active-text="禁用"
                                inactive-text="正常"
                                @change="tabBtn('statusT',scope.row)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="分类状态" align="center"  min-width="100" >
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.isshowT"
                                class="ml-2"
                                width="60"
                                inline-prompt
                                active-text="显示"
                                inactive-text="隐藏"
                                @change="tabBtn('isshowT',scope.row)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="200" align="center">
                        <template #default="scope">
                            <el-button link type="primary" @click="tourl('/maintain/exploit/config/'+scope.row.id)" >配置列表</el-button>
                            <el-button link type="primary" v-if="isAuthBtn('editor')" @click="tabBtn('editor',scope.row)">编辑</el-button>
                            <el-button link type="primary" v-if="isAuthBtn('del')" @click="tabBtn('del',scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <!-- 修改弹窗 -->
		<el-dialog
            v-model="state.upShow"
            :title="state.detailData.id?'修改配置分类':'新增配置分类'"
            center
        >
            <div v-if="state.upShow">
                <el-form :model="state.detailData" ref="detailDataRef" :rules="rules" label-width="180px" status-icon>
                    <el-form-item label="父级分类" prop="pid" >
                        <el-select v-model="state.detailData.pid" filterable placeholder="请选择父级分类">
                          <el-option
                            v-for="item in state.tabList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                          />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="title" >
                        <el-input v-model="state.detailData.title" clearable />
                    </el-form-item>
                    <el-form-item label="分类字段(英文)" :prop="state.detailData.id?'':'fields'" >
                        <el-input v-model="state.detailData.fields" :disabled="state.detailData.id?true:false" clearable />
                    </el-form-item>
                    <el-form-item label="分类类型" prop="type" >
                        <el-radio-group v-model="state.detailData.type">
                            <el-radio label="0"  border>系统</el-radio>
                            <el-radio label="3"  border>其他</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分类状态" prop="status" >
                        <el-radio-group v-model="state.detailData.status">
                            <el-radio label="0"  border>正常</el-radio>
                            <el-radio label="1"  border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分类隐藏" prop="isshow" >
                        <el-radio-group v-model="state.detailData.isshow">
                            <el-radio label="1"  border>显示</el-radio>
                            <el-radio label="0"  border>隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分类排序" prop="order_num" >
                        <el-input-number v-model="state.detailData.order_num" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="state.upShow = false;state.btnloading=false;">取消</el-button>
                    <el-button type="primary" @click="queding" :loading="state.btnloading" :disabled="state.btnloading">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script lang="ts" setup name="maintainexploitconfigtab">
    import { toRefs,ref, reactive,onMounted, defineComponent } from 'vue';
    import { useRouter } from 'vue-router'
    import { ElNotification, ElMessage ,ElMessageBox ,FormRules,ElTree} from 'element-plus'
    import { systemApi } from '/@/api';
    import { isModification } from '/@/utils/kingmin';//去重
    const router = useRouter();
    const detailDataRef=ref();
    const state = reactive({
        roleBtn:router.currentRoute.value.meta.roleBtn,
        btnloading:false,
        loading:true,
        dataList:[],
        pages: {
            isAll: false,
            pageCount: 0,
            pageSize: 10,
            recordCount: 0,
            pno: 1
        },
        upShow:false,
        detailData:{},
        originalData:{},
        tabList:[]
    });
    const rules = reactive<FormRules>({
        pid: [
            { required: true, message: '请选择父级分类信息', trigger: ['blur', 'change'] },
        ],
        title: [
            { required: true, message: '请填写分类名称', trigger: ['blur', 'change'] },
            { min: 2, max:12, message: '最少2个字符,最多12个字符', trigger: ['blur', 'change'] },
        ],
        fields: [
            { required: true, message: '请填写分类字段', trigger: ['blur', 'change'] },
            { min: 4,  message: '最少4个字符 ', trigger: ['blur', 'change'] },
        ],
        order_num: [
            { required: true, message: '请填写分类排序', trigger: ['blur', 'change'] },
        ]
        
    });
    const queding=()=>{
        detailDataRef.value.validate((valid) => {
            if (valid) {
                // 修改
                let data=JSON.parse(JSON.stringify(state.detailData));
                state.btnloading=true;
                let dt={};
                if(state.detailData.id){
                    dt=isModification(data,state.originalData);
                    // let dt=state.detailData;
                    if(Object.values(dt).length>0){
                        dt.id=state.detailData.id;
                    }else{
                        ElMessage({message:'没有要修改的数据',type:"warning"});
                        state.upShow=false;
                        state.btnloading=false;
                        return false;
                    }
                    // console.log(dt)
                    upDataFun(dt);
                }else{
                    // console.log(data)
                    addDataFun(data);
                    
                }			
            }
        })
    }
    // 修改
    const upDataFun=(dt:object)=>{
        if(!dt){
            ElMessage.error('修改的数据为空');
            return false;
        }
        systemApi('uploadConfigTab',dt).then(res=>{
            ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
            state.upShow=false;
            state.btnloading=false;
            getConfigTab();
        })
        .catch(res=>{
            if(res.code!=450000){
                ElMessageBox.confirm(res.msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {})
                .catch(() => {});
                state.btnloading=false;
            }
        })
    }
    // 新增
    const addDataFun=(dt:object)=>{
        if(!dt){
            ElMessage.error('新增的数据为空');
            return false;
        }
        systemApi('addConfigTab',dt).then(res=>{
            ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
            state.upShow=false;
            state.btnloading=false;
            getConfigTab();
        })
        .catch(res=>{
            if(res.code!=450000){
                ElMessageBox.confirm(res.msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {})
                .catch(() => {});
                state.btnloading=false;
            }
        })
    }
    // 操作按钮
    const tabBtn=(e:string,item:object)=>{
        if(e=='del'){
            ElMessageBox.confirm(
                '确定删除配置分类['+item.title+']吗?',
                '提示',
                {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
            .then(() => {
                let dt={
                    id:item.id,
                    isdel:1
                }
                upDataFun(dt);
                //  console.log(dt)
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
        }
        if(e=='editor'){
            if(state.tabList.length<=0){
                getTabList();
            }
            state.detailData=item;
            state.originalData=JSON.parse(JSON.stringify(item));
            state.upShow=true;
        }
        if(e=='add'){
            if(state.tabList.length<=0){
                getTabList();
            }
            state.detailData={
                id:"",
                pid:'0',
                title:"",
                fields:"",
                type:'0',
                status:'0',
                isshow:'1',
                order_num:100

            };
            state.upShow=true;
        }
        if(e=='statusT'){
            // console.log(item.statusT)
            let dt={
                status:item.statusT?'1':'0',
                id:item.id
            }
            upDataFun(dt);
        }
        if(e=='isshowT'){
            // console.log(item.isshowT)
            let dt={
                isshow:item.isshowT?'1':'0',
                id:item.id
            }
            upDataFun(dt);
        }
    }
    // 获取系统配置顶级分类
    const getTabList=()=>{
        systemApi('oneConfigTab',{}).then((res)=>{
            state.tabList=res;
            // getConfigData();

        })
    }
    // 获取系统设置分类
    const getConfigTab=()=>{
        systemApi('configTab?exploit=0',{}).then((res)=>{
            state.dataList=res;
            state.loading=false;
            // getConfigData();

        })
    }
    // 权限判断
    const isAuthBtn = (e) => {
        let auth=false;
        if(e){
            for(let p of state.roleBtn){
                if(p==e){
                    auth=true;
                }
            }
        }
        return auth;
    };
    // 跳转
    const tourl = (e) => {
        router.push(e);
    };
    
    onMounted(()=>{
          // 获取当前路由实例参数
        //   console.dir(router.currentRoute.value.query.id);
        //   console.dir(router.currentRoute.value.meta.roleBtn);
          if(!isAuthBtn('index')){
              router.push('/401');
          }else{
              //操作函数
              
              getConfigTab();
          }
    })
</script>
    
<style scoped lang="scss">
    .maintainexploitconfigtab{
        padding:5px;
    }
</style>
    